<template>
  <Header></Header>
  <div class="html">
    <img src="../../assets/images/static-union_164793255107785e.png " alt="" />
    <div class="degnlu">
      <div>
        <input
          type="text"
          placeholder="请输入账号"
          v-model="phone"
          @blur="verify"
        />
        <span class="iconfont icon-cuowu3" @click="qingkongone"></span>
      </div>
      <div>
        <input type="text" placeholder="请输入密码" v-model="phoneList" />
        <button class="ipt" @click="huoquyanzhengma(phone)">获取验证码</button>
      </div>
      <div>
        <input
          type="text"
          placeholder="请输入登录密码"
          v-model="password"
          @blur="passwordblur"
        />
        <span class="iconfont icon-cuowu3" @click="qingkongtwo"></span>
      </div>
      <p class="passwordyanzheng" v-show="!password">
        (至少五位数字或字母)
      </p>
      <div>
        <input type="text" placeholder="请确认登录密码" v-model="password1" />
        <span class="iconfont icon-cuowu3" @click="qingkongthree"></span>
      </div>
    </div>
    <div class="shouji">
      <button @click="huoqutoken">完成注册</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "../../components/wcj-Header/index.vue";
import { reqGetUserCode, reqUserRegister } from "../../api/wcj-login/index";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { result, trim } from "lodash";
import { useRouter } from "vue-router";
let phone = ref<any>("");
let phoneList = ref<any>("");
let password = ref<any>("");
let password1 = ref<any>("");
let router = useRouter();
const huoquyanzhengma: any = async (phone: any) => {
  let result = await reqGetUserCode(phone);
  console.log(result);

  phoneList.value = result.data;
};
const huoqutoken = async () => {
  if (password.value && password1.value) {
    if (password.value.trim() === password1.value.trim()) {
      try {
        let result: any = await reqUserRegister({
          phone: phone.value,
          password: password.value,
          code: phoneList.value,
        });
        console.log(result);
        if (result.code == 200) {
          router.push("/login");
          ElMessage({
            type: "success",
            message: "注册成功",
          });
        } else {
          ElMessage({
            type: "error",
            message: result.message,
          });
        }
      } catch (error: any) {
        ElMessage({
          type: "error",
          message: error.message,
        });
      }
    } else {
      ElMessage({
        type: "error",
        message: "两次密码输入错误",
      });
    }
  } else {
    ElMessage({
      type: "error",
      message: "请输入账号密码",
    });

    console.log(result);
  }
};
const qingkongtwo = () => {
  password.value = "";
};
const qingkongthree = () => {
  password1.value = "";
};
const qingkongone = () => {
  phone.value = "";
};
const verify = () => {
  if (!/^1[34578]\d{9}$/.test(phone.value)) {
    ElMessage({
      type: "error",
      message: "请输入正确手机号",
    });
    phone.value = "";
  }
};
const passwordblur = () => {
  if (
    !/^[0-9a-zA-Z]{5,10}$/.test(
      password.value
    )
  ) {
    console.log();
    if (password.value.length < 5) {
      ElMessage({
        type: "error",
        message: "至少五位数密码",
      });
    } else {
      ElMessage({
        type: "error",
        message: "密码格式错误",
      });
    }
    password.value = "";
  }
};
</script>

<style scoped>
.html img {
  display: block;
  width: 134px;
  height: 45px;
  margin: 30px auto;
}
.degnlu {
  padding: 0;
  margin-left: 15px;
}
.degnlu div {
  width: 335px;
  height: 37px;
  margin-top: 35px;
  padding: 0;
  border-bottom: 1px solid #d6d6d6;
}
.degnlu div input {
  padding-left: 5px;
  font-size: 15px;
  border: none;
  background: none;
}
.degnlu .iconfont {
  float: right;
  margin-right: 15px;
  line-height: 37px;
}
.degnlu .ipt {
  float: right;
  margin-right: 15px;
  background: none;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  width: 82px;
  height: 27px;
  font-size: 14px;
}
.html .shouji button {
  width: 335px;
  margin-left: 16px;
  margin-bottom: 15px;
  margin-top: 25px;
  height: 47px;
  background: red;
  color: white;
  font-size: 14px;
  border: none;
  border-radius: 5px;
}
.degnlu div:nth-child(4) {
  position: relative;
}
.passwordyanzheng {
  font-size: 12px;
  position: absolute;
  top: 304px;
  left: 125px;
  margin-top: 10px;
  padding-left: 3px;
  color: #bfbfbf;
}
</style>
